<template>
  <div class="findpassword_wrap">
    <div style="text-align: center"><h1>找回密码</h1></div>
    <div class="form_warp">
      <el-form ref="formRef" :model="loginDate" class="demo-dynamic">
        <el-row>
          <el-form-item prop="email">
            <!-- v-model 数据的双向绑定 -->
            <el-input
              placeholder="请输入QQ邮箱"
              :prefix-icon="Message"
              v-model="loginDate.email"
              @blur="confirmemail"
            />
          </el-form-item>
          <div v-if="vemail">格式不正确</div>
        </el-row>
        <el-row>
          <el-form-item>
            <el-input
              type="text"
              placeholder="输入验证码"
              v-model="loginDate.code"
              style="width: 120px"
            />
            <el-button
              class="find_btn"
              type="primary"
              @click="send"
              round
              style="width: 100px"
              >发送验证码</el-button
            >
          </el-form-item>
        </el-row>
        <el-row>
          <el-button class="find_btn" type="primary" @click="handlefind" round
            >确定</el-button
          >
        </el-row>
      </el-form>
    </div>
  </div>
</template>

<script setup>
import { reactive, ref } from 'vue'
import { Message } from '@element-plus/icons-vue'
import axios from 'axios'
import router from '@/router'
import '../assets/css/all.css'
const loginDate = reactive({
  email: '',
  code: ''
})
const vemail = ref(false)
function confirmemail() {
  if (!/^[1-9][0-9]{4,10}@qq.com$/.test(loginDate.email)) vemail.value = true
  else vemail.value = false
}
function send() {
  axios({
    url: 'http://localhost:8080/mail/' + loginDate.email,
    method: 'get',
    contentType: 'application/json'
  }).then(function (response) {
    alert('发送成功')
  })
}
function handlefind() {
  axios({
    url: 'http://localhost:8080/mail/forget',
    method: 'post',
    contentType: 'application/json',
    data: {
      phone: loginDate.email,
      code: loginDate.code
    }
  }).then(function (response) {
    if (response.data.result === 'success') {
      router.push('/findchange?email=' + loginDate.email)
      console.log()
    } else if (response.data.result === 'fail') alert('验证码有误')
  })
}
</script>

<style lang="scss">
.findpassword_wrap {
  width: 100%;
  height: 100%;
  margin: 0;
  background-image: url('../assets/1.jpg');
  background-size: 100% 100%;
  background-attachment: fixed;
  position: relative;
}
.form_warp {
  position: fixed;
  // background: floralwhite;
  width: 220px;
  height: 200px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.find_btn {
  margin: 20px auto;
  display: block;
  width: 100%;
  height: 28px;
}
</style>
